<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="x-UA-Compatible" content="ie=Edge">
   	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Crafty - 键盘</title>
	<link rel="shortcut icon" href="../favicon.ico">
	<link type="text/css" rel="stylesheet" href="../craftyjs-site.css" />
</head>
<body>
	<div id = "header-background"> </div>
	<div id = "page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="../"> <img class="logo" src="../images/text-logo.png" /> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="../">首页</a></li>
						<li><a href="../getting-started/">快速开始</a></li>
						<li><a href="../documentation/">文档</a></li>
						<li><a href="../api/">API</a></li>
						<li><a href="../components/">组件</a></li>
						<li class="emph"><a href="../#install">下载</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			
<div id="docs">
	<div id='doc-nav'>
		<ul id='doc-level-one'>
			<li>
				Topics
				<ul>
					<li>
						<a href='../documentation/'>
							文档
						</a>
					</li>
					<li>
						<a href='../documentation/entities.html'>
							实体
						</a>
					</li>
					<li>
						<a href='../documentation/events.html'>
							事件
						</a>
					</li>
					<li>
						<a href='../documentation/components.html'>
							组件
						</a>
					</li>
					<li>
						<a href='../documentation/2d.html'>
							2D绘图
						</a>
					</li>
					<li>
						<a href='../documentation/text.html'>
							文本
						</a>
					</li>
					<li>
						<a href='../documentation/keyboard.html'>
							键盘
						</a>
					</li>
					<li>
						<a href='../documentation/mouse.html'>
							鼠标
						</a>
					</li>
					<li>
						<a href='../documentation/sound.html'>
							声音
						</a>
					</li>
					<li>
						<a href='../documentation/sprites.html'>
							精灵
						</a>
					</li>
					<li>
						<a href='../documentation/scenes.html'>
							场景
						</a>
					</li>
					<li>
						<a href='../documentation/gameloop.html'>
							游戏循环
						</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<div id='doc-content' class="markdown">
		

		<h2> 键盘 </h2>
<p>Crafty 提供了简单的组件让你非常容易的通过键盘控制游戏角色：</p>
<ul>
<li><a href="../api/Twoway.html">Twoway</a></li>
<li><a href="../api/Fourway.html">Fourway</a></li>
<li><a href="../api/Multiway.html">Multiway</a></li>
</ul>
<h2 id="fourway-and-multiway">Fourway 和 Multiway</h2>
<p>使用 Fourway 组件，你需要调用 <code>fourway()</code> 方法来调整运动的速度。</p>
<pre><code>Crafty.init();
Crafty.e(<span class="hljs-string">'2D, Canvas, Fourway, Color'</span>)
  .attr({<span class="hljs-attr">x</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">30</span>, <span class="hljs-attr">w</span>: <span class="hljs-number">30</span>})
  .color(<span class="hljs-string">'red'</span>)
  .fourway(<span class="hljs-number">5</span>)</code></pre>
<p>这里我们创建了一个红色方块，它将响应 WASD 和方向键进行运动。&quot;Fourway&quot; 是 <a href="../api/Multiway.html">&quot;Multiway&quot;</a> 的包装类型,你可以使用它定义更加复杂的运动。</p>
<h2 id="twoway">Twoway</h2>
<p>当你创建平台游戏时（例如马里奥）,你可能需要使用 <a href="../api/Twoway.html">Twoway</a> 组件， 这样你可以从任何一边移动，跳上跳下。</p>
<pre><code>Crafty.init();
Crafty.e(<span class="hljs-string">'2D, Canvas, Twoway, Color'</span>)
  .attr({<span class="hljs-attr">x</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">30</span>, <span class="hljs-attr">w</span>: <span class="hljs-number">30</span>})
  .color(<span class="hljs-string">'red'</span>)
  .twoway()</code></pre>
<p>大多数情况下，你会觉得加入 <a href="../api/Gravity.html">Gravity</a> 组件会更好!</p>
<h2 id="the-keyboard-component">键盘组件</h2>
<p>你可能需要比上面组件提供的还要多的控制。为了响应特定的键盘事件，需要给实体添加一个 <a href="../api/Keyboard.html">&quot;Keyboard&quot;</a> 组件。下面，我们将创建一个按任意键转为蓝色方块的红色方块。</p>
<pre><code>Crafty.init();
Crafty.e(<span class="hljs-string">'2D, Canvas, Color, Keyboard'</span>)
  .attr({<span class="hljs-attr">x</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">30</span>, <span class="hljs-attr">w</span>: <span class="hljs-number">30</span>})
  .color(<span class="hljs-string">'red'</span>)
  .bind(<span class="hljs-string">"KeyDown"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">this</span>.color(<span class="hljs-string">"blue"</span>);
  })</code></pre>
<p>各种 <a href="../api/KeyboardEvent.html">键盘事件</a> 会传递关于原始DOM事件信息。Crafty 提供了一个便于使用的 <a href="../api/Crafty-keys.html">按键字典</a>。在接下来的例子中, 我们将创建一个使用方向键移动的方块：</p>
<pre><code>Crafty.e(<span class="hljs-string">"2D, Canvas, Color, Keyboard"</span>)
  .attr({<span class="hljs-attr">x</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">w</span>: <span class="hljs-number">30</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">30</span>})
  .color(<span class="hljs-string">"red"</span>)
  .bind(<span class="hljs-string">'KeyDown'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
    <span class="hljs-keyword">if</span>(e.key == Crafty.keys.LEFT_ARROW) {
      <span class="hljs-keyword">this</span>.x = <span class="hljs-keyword">this</span>.x - <span class="hljs-number">1</span>;
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (e.key == Crafty.keys.RIGHT_ARROW) {
      <span class="hljs-keyword">this</span>.x = <span class="hljs-keyword">this</span>.x + <span class="hljs-number">1</span>;
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (e.key == Crafty.keys.UP_ARROW) {
      <span class="hljs-keyword">this</span>.y = <span class="hljs-keyword">this</span>.y - <span class="hljs-number">1</span>;
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (e.key == Crafty.keys.DOWN_ARROW) {
      <span class="hljs-keyword">this</span>.y = <span class="hljs-keyword">this</span>.y + <span class="hljs-number">1</span>;
    }
  });</code></pre>
	</div>
</div>
			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="../images/google.png" />
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="../images/email.png" />
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="../images/github.png" />
				github</a>
		</div>
		<ul>
			<li><a href="../">首页</a></li>
				<li><a href="../getting-started/">快速开始</a></li>
				<li><a href="../documentation/">文档</a></li>
				<li><a href="../api/">API</a></li>
				<li><a href="../components/">组件</a></li>
				<li class="emph"><a href="../#install">下载</a></li>
		</ul>
		<p>
			&copy; Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>
</body>
</html>
